<template>
  <a-modal
    :title="title"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="false">
    <template slot="footer">
      <a-button @click="close">关闭</a-button>
      <a-button @click="sendModifyTime" type="primary">确认</a-button>
    </template>

    <a-form-model ref="form" :model="model" :rules="validatorRules" labelAlign="left">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="starttime" label="任务开始时间">
        <a-time-picker format="HH:mm" v-model="model.starttime"/>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endtime" label="任务结束时间">
        <a-time-picker format="HH:mm" v-model="model.endtime"/>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-checkbox :checked="notify" @change="onChange">同步每天此时间段</a-checkbox>
      </a-form-model-item>
    </a-form-model>

  </a-modal>
    
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'ModifyTimeModal',
    data(){
      return {
        title: '操作',
        visible: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        info: {},
        model: {},
        notify: false,
      }
    },
    computed: {
      validatorRules: function () {
        return {
          starttime: [{ required: true, message: '请选择任务开始时间!' }],
          endtime: [{ required: true, message: '请选择任务结束时间!' }],
        }
      }
    },
    methods:{
      moment,
      edit(info, record) {
        this.info = info
        if (record.starttime && record.endtime) {
          record.starttime = moment(record.starttime, 'HH:mm')
          record.endtime = moment(record.endtime, 'HH:mm')
        } else {
          record.starttime = null
          record.endtime = null
        }
        this.model = Object.assign({}, record)
        console.log(this.model);
        this.visible = true
      },
      onChange(e) {
        this.notify = e.target.checked
      },
      close() {
        this.visible = false
        this.model = {}
        this.notify = false
      },
      sendModifyTime() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('modifyTime', {
              info: this.info,
              data: this.model,
              notify: this.notify
            })
            this.close()
          }else {
            return false
          }
        })
      }
    }
  }
</script>
<style scoped>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>